<template>
    <rx-dialog @handOk="cancel" @cancel="cancel">
        <div class="InAppAdd">
            <div class="InAppAdd-my-common">
                <div class="InAppAdd-my-common-head">{{i18n('list.myApp','我的常用应用')}}<span>{{i18n('list.clickMinus','点击右上角减号移除出我的常用应用列表')}}</span></div>
                <div class="InAppAdd-my-common-list">
                    <div @click="appCompile(obj)" class="InAppAdd-my-common-list-common" :class="[obj.appType=='custom' && obj.type!='interior' ? 'InAppAdd-my-common-list-common-hover':'']" style="border:1px dashed #dedede" v-for="(obj,index) in appList" :key="index">
                        <my-icon v-if="obj.appType=='custom'" @click.stop="handAppDelete(obj)" type="iconoffline_fill" class="InAppAdd-my-common-icon-delete"></my-icon>
                        <div  v-if="obj.icon && JSON.parse(obj.icon).system=='lineage'" :style="{'background-image':JSON.parse(obj.icon).bgColor}" class="InAppAdd-my-common-list-common-icon">
                            <a-icon v-if="!obj.icon.includes('type')" :type="obj.icon"/>
                            <my-icon v-else-if="['customIcon','userCustomIcon','jpaasIcon'].includes(JSON.parse(obj.icon).type)" :type="JSON.parse(obj.icon).icon"></my-icon>
                            <a-icon v-else="JSON.parse(obj.icon).type" :type="JSON.parse(obj.icon).icon"></a-icon>
                        </div>
                        <div v-else-if="obj.icon" :style="{'background':JSON.parse(obj.icon).bgColor}" class="InAppAdd-my-common-list-common-icon">
                            <a-icon v-if="!obj.icon.includes('type')" :type="obj.icon"/>
                            <my-icon v-else-if="['customIcon','userCustomIcon','jpaasIcon'].includes(JSON.parse(obj.icon).type)" :type="JSON.parse(obj.icon).icon"></my-icon>
                            <a-icon v-else="JSON.parse(obj.icon).type" :type="JSON.parse(obj.icon).icon"></a-icon>
                        </div>
                        <span>{{obj.name}}</span>
                    </div>
                    <div @click="addCommonApp" style="border:1px dashed #dedede" class="InAppAdd-my-common-list-common InAppAdd-my-common-list-common-add">
                        <my-icon type="iconjia"></my-icon>
                        <span>{{i18n('list.externalApp','外部应用')}}</span>
                    </div>
                </div>
            </div>
            <div class="InAppAdd-all-common">
                <div class="InAppAdd-my-common-head">{{i18n('list.myAllApps','我的全部应用')}}<span>{{i18n('list.clickPlus','点击右上角的加号可以设为我的常用应用')}}</span></div>
                <div class="InAppAdd-my-common-list">
                    <div class="InAppAdd-my-common-list-common InAppAdd-my-common-list-common-all" v-if="appuserALL(obj)" v-for="(obj,index) in appAll" :key="index">
                        <my-icon @click="addCommon(obj)"  type="iconaddition_fill" class="InAppAdd-my-common-icon-delete InAppAdd-my-common-add"></my-icon>
                        <div v-if="obj.icon" class="InAppAdd-my-common-list-common-icon" :style="{'background':obj.backColor}">
                            <a-icon v-if="!obj.icon.includes('type')" :type="obj.icon"/>
                            <my-icon v-else-if="['customIcon','userCustomIcon','jpaasIcon'].includes(JSON.parse(obj.icon).type)" :type="JSON.parse(obj.icon).icon"></my-icon>
                            <a-icon v-else="JSON.parse(obj.icon).type" :type="JSON.parse(obj.icon).icon"></a-icon>
                        </div>
                        <span>{{obj.title}}</span>
                    </div>
                </div>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
import InsAppCollectApi from "@/api/portal/core/insAppCollect";
import {mapState} from 'vuex';
import InsPortalDefApi from "@/api/portal/core/insPortalDef";
import InsAppCollectEdit from "@/views/modules/portal/core/InsAppCollectEdit"
import {BaseForm, Dialog, RxDialog,Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "InAppAdd",
    props:['appList','appType','colId'],
    components:[],
    mixins: [BaseForm],
    data(){
        return{
            appAll:[],
            appUser:[],
        }
    },
    computed: {
        ...mapState({
            menus: state => state.appSetting.menus
        })
    },
    mounted() {
        this.init();
        let self=this;
        this.menus.find(item=>{
            item.title=self.$i18(item.title);
            if(item.appType ==1){
                this.appAll.push(item);
            }
        })
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"InAppAdd",key);
        },
        appuserALL(obj){
            if(this.appUser.indexOf(obj.key)>-1){
                return false
            }else {
                return true
            }
        },
        init(){
            this.appUser = [];
            this.appList.find(res=>{
                if (res.appType =='custom' && res.app){
                    this.appUser.push(JSON.parse(res.app).value)
                }
            })
        },
        /**
         * 给全部应用添加到常用应用
         * @param value
         */
        addCommon(obj){
            //判断是否添加重复应用
            for(var i in this.appList){
                if(this.appList[i].name ==obj.title){
                    this.$message.info(this.i18n('msa.notAdd','请勿重复添加'));
                    return
                }
            }
            var icon_ = {}
            if(obj.icon){
                icon_ =JSON.parse(obj.icon);
                this.$set(icon_,'system',"custom");
                this.$set(icon_,'type',"customIcon");
                this.$set(icon_,'bgColor',obj.backColor);
            }
            var value ={
                icon:JSON.stringify(icon_),
                name:obj.title,
                app:JSON.stringify({text:obj.title,value:obj.key}),
                sn:obj.sn || 1,
                appType: "custom",
                type:'interior'
            };
            var self = this;
            InsAppCollectApi.save(value).then(res=>{
                self.loadData();
            });
        },
        //删除应用
        handAppDelete(commonApp){
            var self = this;
            this.$confirm({
                title: self.i18n('msa.deleteApp','是否删除应用'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk(){
                    InsAppCollectApi.del({ids:commonApp.id}).then(res=>{
                        self.loadData();
                    })

                }
            });
        },
        //刷新应用
        loadData() {
            InsPortalDefApi.getDataByColId(this.colId).then(res => {
                this.appList = res;
                this.init();
            });
        },
        /**
         * 编辑应用
         * @param obj
         */
        appCompile(obj){
            var self=this;
            if(obj.type =='interior' || obj.appType!='custom'){
                return
            }
            var baseConf = {
                "curVm": this,
                component: InsAppCollectEdit,
                title: this.i18n('list.editApp','编辑常用应用'),
                widthHeight: ['950px', '600px'],
                data: {
                    pkId:obj.pkId
                }
            };
            Util.open(baseConf, function (action) {
                if(action!='ok')return;
                self.loadData();
            })
       },
        //添加外部应用
        addCommonApp(){
            var self=this;
            Util.open({
                component: InsAppCollectEdit,
                curVm: this,
                title: this.i18n('list.addApp','添加常用应用'),
                data:{
                    appType:"custom"
                },
                widthHeight: ['950px', '600px']
            }, function (action) {
                if (action != 'ok') return;
                self.loadData();
            });
        },
        save(values){
            return true
        },
    },
}
</script>

<style lang="less">
.InAppAdd-my-common-list-common-all{
    background-color: #f8f8f8!important;
}
.InAppAdd-my-common-list-common-all:hover{
    background-color: #f0f2f5!important;
}
.InAppAdd-my-common-list-common-add{
    display: flex;
    align-items: center;
    flex-direction: column;
    i{
        margin-top: 45px;
    }
    span{
        text-align: center;
        font-size: 14px;
        color: #626262;
    }
}
.InAppAdd-my-common-list{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .InAppAdd-my-common-list-common:hover{
        //background-color: #f0f2f5;
        .InAppAdd-my-common-icon-delete{
            color: #e52727;
        }
        .InAppAdd-my-common-add{
            color:#4285f4!important;
        }
    }
    .InAppAdd-my-common-list-common-hover:hover{
        background-color: #f0f2f5
    }
    .InAppAdd-my-common-list-common{
        position: relative;
        cursor: pointer;
        width: 130px;
        height: 130px;
        background-color: #ffffff;
        border-radius: 4px;
        margin-top: 20px;
        margin-right: 20px;
        .InAppAdd-my-common-icon-delete{
            position: absolute;
            color: #c7c7c7;
            top: -9px;
            font-size: 15px;
            right: -7px;
        }
        .InAppAdd-my-common-list-common-icon{
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 68px;
            border-radius: 50%;
            background-image: linear-gradient(0deg,
            #2b76f3 0%,
            #6db6fb 100%);
            margin-top: 21px;
            margin-left: 34px;
            i{
                font-size: 30px;
                color: white;
            }
        }
        span{
            color: #555555;
            font-size: 14px;
            margin-top: 6px;
            text-align: center;
            display: block;
        }
    }
}
.InAppAdd{
    padding:0px 20px;
    width: 100%;
}
.InAppAdd-my-common-head{
    border-bottom: 1px solid #e8e8e8;
    margin-top: 10px;
    line-height: 50px;
    font-size: 15px;
    color: #333333;
    span{
        font-size: 12px;
        color: #909090;
        margin-left: 15px;
    }
}
</style>